<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css 尺寸</title>
    <!-- 我们使用不同的单位来设置 -->
    <style type="text/css">
        img.normal{
            height:auto;  /*auto 默认是不是原来的大小?? 貌似不是  */
        }
        img.big{
            height: 160px;
        }
        img.small{
            height: 30px;
        }
        p{
            max-height: 10px;
        }

        p.max-width{
           max-width: 50%;
        }
    </style>
</head>
<body>
    <img class="normal" src="../images/eg_smile.gif" />
    <br/>
    <img class="big" src="../images/eg_smile.gif"/>
    <br/>
    <img class="small" src="../images/eg_smile.gif"/>
    <br/>

    <!--   我很好奇为啥 文字默认会环绕着图片 但是很多文字被遮住了 -->
    <p> 这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
    </p>
    <img src="../images/eg_smile.gif">
    <p class="max-width">这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。
        这是一些文本。这是一些文本。这是一些文本。</p>

</body>
</html>